<template>
  <div class="collapseExp-content">
<!--    {{collapse}}&#45;&#45;-->
    <div v-for="(item, index) in collapse" :key="index" class="position">

      <div style="width: calc(100% - 80px)">
        <Collapse @on-change="changeName">
          <Panel>
            <template>
              <Input
                v-model="item.name"
                class="title1"
                show-word-limit
                :maxlength="64"
              />
              <WarningTip content="请输入个数为1-64的字符" class="icon_title1"></WarningTip>
            </template>
            <template #content>
              <div style="margin-left: 20px;"
                v-for="(item2, index2) in item.courseexpchapterDtoList"
                :key="index2"
              >
                <Collapse>
                  <Panel>
                    <template>
                      <div class="flex-sencond">
                        <div class="flex-third">
                          <Input
                            v-model="item2.name"
                            show-word-limit
                            class="title2"
                            :maxlength="64"
                          />
                          <WarningTip content="请输入个数为1-64的字符" class="icon_title2"></WarningTip>
                        </div>
                      <div class="add_icon_second" @click="stopPropagation"> 
                        <Action
                          :index="index2"
                          :showDown="
                            item.courseexpchapterDtoList.length != index2 + 1
                          "
                          :showUp="index2 != 0"
                          :showDelete="
                            item.courseexpchapterDtoList.length > 0 &&
                            index2 != 0
                          "
                          @addFirst="addSecond(index, index2)"
                          @downSelectExpers="downSelectSecond(index, index2)"
                          @upSelectExpers="upSelectSecond(index, index2)"
                          @delSelExper="delSelSecond(index, index2)"
                        />
                      </div>
                     </div>
                    </template>
                    <template #content>
                      <Button
                        type="primary"
                        ghost
                        @click="refreshExp(index, index2)"
                        >选择</Button
                      >
                      <div style="margin: 10px 0px">
                        <Table
                          :data="item2.expOutDtoList"
                          :columns="selectExpersCol"
                          border
                          ref="selectExpersIndex"
                        >
                          <template slot="action" slot-scope="scope">
                            <Tooltip
                              content="下移"
                              placement="left"
                              @click.native="
                                downSelectExpers(index, index2, scope.index)
                              "
                            >
                              <Icon
                                type="md-arrow-down"
                                size="20"
                                v-if="
                                  item2.expOutDtoList.length != scope.index + 1
                                "
                              />
                            </Tooltip>
                            <Tooltip
                              content="上移"
                              placement="left"
                              @click.native="
                                upSelectExpers(index, index2, scope.index)
                              "
                            >
                              <Icon
                                type="md-arrow-up"
                                size="20"
                                v-if="scope.index != 0"
                              />
                            </Tooltip>
                            <Poptip
                              confirm
                              transfer
                              title="确定要删除吗？"
                              @on-ok="
                                delSelExper(index, index2, scope.row.ecid)
                              "
                            >
                              <Icon type="ios-close-circle-outline" size="20" />
                            </Poptip>
                          </template>
                        </Table>
                      </div>
                    </template>
                  </Panel>
                </Collapse>
              </div>
            </template>
          </Panel>
        </Collapse>
      </div>

      <div class="add_icon">
        <Action
            :index="index"
            :showDown="collapse.length != index + 1"
            :showUp="index != 0"
            :showDelete="collapse.length > 0 && index != 0"
            @addFirst="addFirst(index)"
            @downSelectExpers="downHeaderExpers(index)"
            @upSelectExpers="upHeaderExpers(index)"
            @delSelExper="delHeaderExper(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Action from './action.vue';
// import { collapseData } from './mixinCollapse';
export default {
  name: 'collapseExp',
  components: { Action },
  // mixins:[collapseData],
  props: {
    collapseArr: {
      type: Array,
      default:()=> [
        {
          name:'第一章节',
          courseexpchapterDtoList:[
           {
             name:'第1节',
             expOutDtoList:[]
           }
          ]
        },
      ]
    }
  },
  data () {
    return {
      title: '第一章节title',
      title2: ' 第二章节title2',
      title3: ' 课件1',
      value1: '1',
      value2: '1-1',
      collapse: [],
      selectExpersCol: [
        {
          title:'序号',
          type: 'index',
          align: 'center',
          width: 100,
        },
        {
          title: '课件名称',
          key: 'ecname',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',

        },
      ],
      sumExpList:[],
    }
  },
  watch: {
    collapseArr: {
      handler (val) {
        this.collapse = val
        console.log('this.collapse---',this.collapse)
        this.sumExpFun()
      },
      deep:true
    },
    collapse: {
      handler (val) {
        this.$emit('changeCollapse',val)
      },
      deep:true
    }
  },
  mounted () {
    this.collapse = this.collapseArr
    console.log('this.collapse---',this.collapse)
  },
  methods: {
    stopPropagation (e) {
      e.preventDefault()
      e.stopPropagation()
    },
    changeName (val) {
      console.log('🚀 ~ file: collapseExp.vue:43 ~ changeName ~ val', val)
    },
    inputFocus () {
      this.value1 = '1'
    },
    // 第一章节操作
    addFirst(index){
      this.collapse.push(
         {
          name:`第${this.collapse.length + 1}章`,
          courseexpchapterDtoList:[
           {
             name:`第${this.collapse[index].courseexpchapterDtoList.length}节`,
             expOutDtoList:[]
           }
          ]
        }
      )
    },
    downHeaderExpers (index) {
      //下移
      if (index == this.collapse.length - 1) return;
      let arr = this.collapse;
      arr[index] = arr.splice(index + 1, 1, arr[index])[0]
      this.collapse = arr
    },
    upHeaderExpers (index) {
      if (index == 0) return;
      let arr = this.collapse;
      arr[index] = arr.splice(index - 1, 1, arr[index])[0]
      this.collapse = arr
    },
    delHeaderExper (index) {
      if (this.collapse.length == 1) {
				this.$Message.warning('最少保留一个章节')
      } else {
        this.collapse.splice(index,1)
      }
    },

    // 第二章节操作
    addSecond(index,index2){
      console.log('🚀 ~ file: collapseExp.vue:94 ~ addSecond ~ index', index)
      this.collapse[index].courseexpchapterDtoList.push(
        {
             name:`第${ this.collapse[index].courseexpchapterDtoList.length + 1}节`,
             expOutDtoList:[]
           }
      )
      console.log('===this.collapse',this.collapse);
    },
     downSelectSecond (index,index2) {
      //下移
      if (index2 == this.collapse[index].courseexpchapterDtoList.length - 1) return;
      let arr = this.collapse[index].courseexpchapterDtoList;
      arr[index2] = arr.splice(index2 + 1, 1, arr[index2])[0]
      this.collapse[index].courseexpchapterDtoList = arr
    },
    upSelectSecond (index,index2) {
      if (index2 == 0) return;
      let arr = this.collapse[index].courseexpchapterDtoList;
      arr[index2] = arr.splice(index2 - 1, 1, arr[index2])[0]
      this.collapse[index].courseexpchapterDtoList = arr
    },
    delSelSecond (index,index2) {
      if (this.collapse[index].courseexpchapterDtoList.length == 1) {
				this.$Message.warning('最少保留一个章节')
      } else {
        this.collapse[index].courseexpchapterDtoList.splice(index2,1)
      }
    },

    // 第三节内容操作
    // 下移
    downSelectExpers (index, index2, index3) {
      console.log('🚀 ~ file: collapseExp.vue:260 ~ downSelectExpers ~ index, index2, index3', index, index2, index3)
      if (index3 == this.collapse[index].courseexpchapterDtoList[index2].expOutDtoList.length - 1) return;
      let arr = this.collapse[index].courseexpchapterDtoList[index2].expOutDtoList;
      arr[index3] = arr.splice(index3 + 1, 1, arr[index3])[0]
      this.collapse[index].courseexpchapterDtoList[index2].expOutDtoList = arr
    },
    // 上移
    upSelectExpers (index,index2,index3) {
      if (index3 == 0) return;
            let arr =  this.collapse[index].courseexpchapterDtoList[index2].expOutDtoList;
            arr[index3] = arr.splice(index3 - 1, 1, arr[index3])[0]
            this.selectExpers = arr
    },
    // 删除
    delSelExper (index, index2, ecid) {
      let delExperIndex = this.collapse[index].courseexpchapterDtoList[index2].expOutDtoList.findIndex(items => items.ecid === ecid)
      if (delExperIndex >= 0) {
        this.collapse[index].courseexpchapterDtoList[index2].expOutDtoList.splice(delExperIndex, 1);
      }
      this.$emit('delSelExper',ecid)
    },

    // 测试数据
    addFrom () {
      this.$emit('changeAddFrom',this.collapse)
    },
    refreshExp (index,index2) {
      this.$emit('refreshExp',index,index2)
    },
    // 整合课件数据
    sumExpFun () {
      this.sumExpList = []
      this.collapse.forEach((item, index) => {
        if (item.courseexpchapterDtoList.length > 0) {
          item.courseexpchapterDtoList.forEach((item2, index2) => {
            if (item2.expOutDtoList.length > 0) {
              item2.expOutDtoList.forEach((item3, index3) => {
                this.sumExpList.push(item3)
              })
            }
          })
        }
      })
      this.$emit('sumExpList',this.sumExpList)
    }
    
  }
}
</script>

<style scoped>
.position {
  position: relative;
  left: 0px;
  top: 0px;
  margin-bottom: 10px;
}
.title1,
.title22 {
  position: absolute;
  top: 3px;
}
.title1 {
  width: calc(100% - 80px);
}
.title22 {
  width: calc(100% - 100px);
}

.icon_title1{
  position: absolute;
  right: 3px;
  transform: translate(-50%);
}


.add_icon {
  /*position: absolute;*/
  /*right: 0px;*/
  /*top: 2px;*/
  margin-top: 2px;
  cursor:pointer;
}
.add_icon_second {
  /*position: absolute;*/
  /*right: 5px;*/
  /*top: 0px;*/
}

.collapseExp-content{
  /*background: #eceff73d;*/
  min-height: 100px;
  padding: 10px;
}
.collapseExp-content /deep/ .ivu-collapse{
  border: 0;
}
.collapseExp-content .position{
  display: flex;
  background: #dde3e926;
  padding: 10px;
  justify-content: space-between;
}


.collapseExp-content /deep/ .ivu-collapse>.ivu-collapse-item.ivu-collapse-item-active>.ivu-collapse-header{
  border-bottom: 0;
}
.flex-sencond{
  display: flex;
  justify-content: space-between;
  float: right;
  width: calc(100% - 30px);
  
}
.flex-third{
  display: flex;
  width: calc(100% - 100px);

}
.add_icon_second {
  padding-right: 20px;
}



</style>